<template>
    <div>
        <el-row>
           <el-col>
               <el-table
                       :data="tableDataFun"
                       border
                       style="width: 100%"
                       show-summary
                       :header-cell-style="this.$store.state.headerCssObj"
                       :cell-style="this.$store.state.cellCssObj">
                   <el-table-column
                           prop="accountType"
                           label="账户"
                           width="480">
                   </el-table-column>
                   <el-table-column
                           prop="accountCaptial"
                           label="余额"
                           width="480">
                   </el-table-column>
                   <el-table-column label="操作">
                       <template slot-scope="scope">
                           <el-button type="primary" size="mini" v-if="scope.row.topUp" @click="topUpBtn(scope.row)">充值</el-button>
                       </template>
                   </el-table-column>
               </el-table>
           </el-col>
       </el-row>
        <el-row>
            <el-col :span="2">
                <span class="elSpanDiv">资金账户</span>
            </el-col>
            <el-col :span="3">
                <diySelect :optionData="optionData" @choose="choose" :propsValue="selectValue" size="medium"></diySelect>
            </el-col>
            <el-col :span="2">
                <span class="elSpanDiv">选择时间</span>
            </el-col>
            <el-col :span="8">
                <el-date-picker
                        v-model="selectDate"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-col>
            <el-col :span="1">
                <div class="elSpanDiv">
                    <el-button size="mini" type="primary" round @click="elRowShow = !elRowShow">更多</el-button>
                </div>
            </el-col>
            <el-col :span="2" :offset="4">
                <div class="elSpanDiv">
                    <el-button size="medium" type="primary" @click="selectFun">开始查询</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row style="padding-top: 10px" v-show="elRowShow">
            <el-col :span="2">
                <span class="elSpanDiv">充值/扣款</span>
            </el-col>
            <el-col :span="3">
                <diySelect :optionData="optionTopUpData" @choose="chooseTopUp" :propsValue="selectTopUpValue" size="medium"></diySelect>
            </el-col>
            <el-col :span="2">
                <span class="elSpanDiv">摘要</span>
            </el-col>
            <el-col :span="3">
                <diySelect :optionData="optionAbstractData" @choose="chooseAbstract" :propsValue="selectAbstractValue" size="medium"></diySelect>
            </el-col>
            <el-col :span="2">
                <span class="elSpanDiv">关键字</span>
            </el-col>
            <el-col :span="5">
                <div class="elSpanDiv">
                    <el-input v-model="theKeyword" placeholder="支付流水号/订单号"></el-input>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-table
                        :data="selectTableData"
                        border
                        style="width: 100%"
                        :header-cell-style="this.$store.state.headerCssObj"
                        :cell-style="this.$store.state.cellCssObj">
                    <el-table-column
                            prop="paymentRecordsId"
                            label="支付流水号" width="200">
                    </el-table-column>
                    <el-table-column
                            prop="confirmTime"
                            label="日期" width="200">
                    </el-table-column>
                    <el-table-column
                            prop="accountType"
                            label="资金账户">
                    </el-table-column>
                    <el-table-column
                            prop="paymentAbstract"
                            label="摘要">
                    </el-table-column>
                    <el-table-column
                            prop="paymentType"
                            label="充值">
                    </el-table-column>
                    <el-table-column
                            prop="paymentType"
                            label="扣款">
                    </el-table-column>
                    <el-table-column
                            prop="accountCaptial"
                            label="账户余额">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div style="text-align: center;width: 100%">
                    <paging :obj = 'pagingData'></paging>
                </div>
            </el-col>
        </el-row>
        <el-dialog
                title="充值提示"
                :visible.sync="topUpVisible"
                width="50%"
                center>
            <div style="width: 80%;margin: 0 auto;">
                <el-row class="topUpElRow">
                    <el-col :span="24"><span class="elSpanPrompt">如您已通过网上银行、线下银行网点或其他方式付款，可在此添加支付记录。管理员核实确认后该笔支付记录方可生效。</span></el-col>
                </el-row>
                <el-row class="topUpElRow">
                    <el-col :span="6"><span class="elSpanDiv">账户名称</span></el-col>
                    <el-col :span="16"><el-input v-model="accountName" :disabled="true"></el-input></el-col>
                </el-row>
                <el-row class="topUpElRow">
                    <el-col :span="6"><span class="elSpanDiv">开户银行</span></el-col>
                    <el-col :span="16"><el-input v-model="accountBank" :disabled="true"></el-input></el-col>
                </el-row >
                <el-row class="topUpElRow">
                    <el-col :span="6"><span class="elSpanDiv">开户账号</span></el-col>
                    <el-col :span="16"><el-input v-model="accountNumber" :disabled="true"></el-input></el-col>
                </el-row>
                <el-row class="topUpElRow">
                    <el-col :span="6"><span class="elSpanDiv">付款日期</span></el-col>
                    <el-col :span="16"><el-date-picker v-model="paymentDate" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker></el-col>
                </el-row>
                <el-row class="topUpElRow">
                    <el-col :span="6"><span class="elSpanDiv">备注</span></el-col>
                    <el-col :span="16"><el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="accountNote">
                    </el-input></el-col>
                </el-row>
                <el-row class="topUpElRow">
                    <el-col :span="6"><span class="elSpanDiv">充值金额</span></el-col>
                    <el-col :span="16"><el-input v-model="topUpAmount" @blur="validationTopUpAmount"></el-input></el-col>
                    <el-col :span="2"><span class="elSpanDiv">元</span></el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="topUpConfirm" >确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import diySelect from '../../components/public/diySelect'
    import paging from '../../components/public/paging'
    import {mapActions} from 'vuex'
    export default {
        name: "CapitalAccount",
        components:{diySelect,paging},
        data(){
            return{
                //资金账户表格
                tableData:[
                    {accountId:'7c3f67de62c343eda3bb47709d7286a3',accountType:'现金账户',accountCaptial:2000,topUp:true},
                    {accountId:'',accountType:'预付款账户',accountCaptial:45698,topUp:false},
                    {accountId:'',accountType:'返点账户',accountCaptial:15478,topUp:false},
                ],
                //查询资金账户表格
                selectTableData:[],
                //资金账户下拉列表数据
                optionData:[
                    {value:'现金账户', label:'现金账户'},
                    {value:'预付款账户', label:'预付款账户'},
                    {value:'返点账户', label:'返点账户'}
                ],
                //资金账户下拉列表选中值
                selectValue:'',
                //选择时间段
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    },{
                        text: '最近半年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                            picker.$emit('pick', [start, end]);
                        }
                    }, ]
                },
                //选择时间
                selectDate: '',
                //充值/扣款下拉列表数据
                optionTopUpData:[
                    {value:'全部', label:'全部'},
                    {value:'充值', label:'充值'},
                    {value:'扣款', label:'扣款'}
                ],
                //充值/扣款下拉列表选中值
                selectTopUpValue:'',
                //摘要下拉列表数据
                optionAbstractData:[
                    {value:'全部摘要', label:'全部摘要'},
                    {value:'现金充值', label:'现金充值'},
                    {value:'销售返点', label:'销售返点'},
                    {value:'退款', label:'退款'},
                    {value:'其他充值', label:'其他充值'},
                    {value:'订单付款', label:'订单付款'},
                    {value:'其他付款', label:'其他付款'},
                    {value:'红冲', label:'红冲'},
                    {value:'订单退款', label:'订单退款'},
                    {value:'收款单充值', label:'收款单充值'},
                    {value:'付款单扣款', label:'付款单扣款'},
                    {value:'退货单退款', label:'退货单退款'},
                    {value:'转账转出', label:'转账转出'},
                    {value:'转账转入', label:'转账转入'},
                    {value:'账单批量付款', label:'账单批量付款'},
                    {value:'拉新提成', label:'拉新提成'},
                    {value:'佣金提现', label:'佣金提现'},
                ],
                //摘要下拉列表选中值
                selectAbstractValue:'',
                //关键字
                theKeyword:'',
                //更多，显示与隐藏
                elRowShow:false,
                //充值弹框显示
                topUpVisible:false,
                //账户名称
                accountName:'',
                //开户银行
                accountBank:'',
                //开户账号
                accountNumber:'',
                //付款日期
                paymentDate:'',
                //备注
                accountNote:'',
                //充值金额
                topUpAmount:0,
                //当前页
                currentPage:0,
                //总页数
                pageCount:0,
            }
        },
        computed:{
            pagingData(){
                var that = this;
                let data = {
                    pageSize:5,//一页展示几条数据
                    pagerCount:5,//超过多少页打点省略
                    currentChange(num){
                        that.currentPage = num//改变当前页
                    },
                    pageCount:that.pageCount,//一共多少页
                }
                return data
            },
            tableDataFun(){
                return this.tableData
            }
        },
        created(){
            //this.$store.state.user.clientId
            this.capitalAccountPageList({clientId:sessionStorage.getItem('clientId')}).then(resp=>{
                 console.log(resp.data)
                // this.tableData = resp.data
                // console.log(this.tableData)
                // resp.data.map((item,i)=>{
                //     this.tableData[i] = item
                // })
            })
        },
        methods:{
            ...mapActions(['capitalAccountPageSelect','capitalAccountPageTopUp','routerFun','capitalAccountPageList','capitalAccountPageTopUpLis']),
            choose(val){
                this.selectValue=val;
            },
            chooseTopUp(val){
                this.selectTopUpValue=val;
            },
            chooseAbstract(val){
                this.selectAbstractValue=val;
            },
            //查询
            selectFun(){
                let obj = {
                    capitalAccount:this.selectValue,//资金账户
                    //selectTopUpValue:this.selectTopUpValue,
                    abs:this.selectAbstractValue,//摘要
                    timeStart:this.selectDate,//开始时间
                    timeEnd:this.selectDate,//结束时间
                    keyword:this.theKeyword,//关键字
                }
                if(this.selectValue !=='' || this.selectTopUpValue !=='' || this.selectAbstractValue !=='' || this.selectDate !=='' || this.theKeyword !==''){
                    this.capitalAccountPageSelect(obj).then(resp=>{
                        if(resp.code === "200"){
                            this.pageCount = resp.pageCount
                            this.selectTableData = resp.data
                        }else{
                            this.$message({
                                type: 'error',
                                message: '查询失败'
                            });
                        }
                    })
                }else {
                    this.$message({
                        type: 'error',
                        message: '请输入查询信息！'
                    });
                }

            },
            //验证金额不为负数
            validationTopUpAmount(){
                if(this.topUpAmount <=0){
                    this.$message({
                        type: 'error',
                        message: '请输入正确的金额，重新输入！'
                    });
                }
            },
            //充值按钮
            topUpBtn(row){
                this.topUpVisible = true
                //console.log(row.accountId)
                this.capitalAccountPageTopUpLis({accountId:row.accountId}).then(resp=>{
                    console.log(resp)//渲染弹框
                    // this.accountName = resp.data.accountName
                    // this.accountBank = resp.data.accountBank
                    // this.accountNumber = resp.data.accountId
                    this.accountName = '深圳市依云云计算有限公司'
                    this.accountBank = '中国建设银行深圳市中旅公馆支行'
                    this.accountNumber = '4201015100052508420'
                })
            },
            topUpConfirm(){
                let obj = {
                    accountName:this.accountName,//账户名称
                    accountBank:this.accountBank,//开户银行
                    accountId:this.accountNumber,//开户账号
                    confirmTime:this.paymentDate,//时间
                    notes:this.accountNote,//备注
                    payMoney:this.topUpAmount,//金额
                    operator:this.$store.state.user.username,//操作人
                }
                if(this.paymentDate !== '' && this.topUpAmount !=='' && this.topUpAmount >0){
                    this.$message({
                        type: 'success',
                        message: '充值成功，正在审核中！'
                    });
                    this.topUpVisible = false
                    // this.capitalAccountPageTopUp(obj).then(resp=>{
                    //     if(resp.code === 200){
                    //         this.$message({
                    //             type: 'success',
                    //             message: '充值成功，正在审核中！'
                    //         });
                    //         this.topUpVisible = false
                    //         let obj = {path:'',name:''}//此处路由不要随意更改，有问题联系杨光兴。
                    //         obj.path = '/Main/Money/PaymentDetails'
                    //         obj.name = '收支明细'
                    //         this.$router.push('/Main/Money/PaymentDetails')
                    //         this.routerFun(obj)
                    //     }else{
                    //         this.$message({
                    //             type: 'error',
                    //             message: '充值失败！'
                    //         });
                    //     }
                    // })
                }else {
                    this.$message({
                        type: 'error',
                        message: '日期或金额不能为空，且金额不为0！'
                    });
                }

            }
        }
    }
</script>

<style scoped lang="less">
    .el-table{
        margin: 20px auto;
    }
    .diySelect{
        margin-left:10px;
    }
    .el-button{
        background-color: #099FB8;
    }
    .elSpanDiv{
        text-align: center;
        line-height: 36px;
        height: 36px;
        width: 100%;
        display: inline-block
    }
    .topUpElRow{
        margin-top: 10px;
        .elSpanPrompt{
            display: inline-block;
            width: 100%;
            font-size: 14px;
            color: #F6B55A;
        }
        span{
            font-size: 18px;
        }
    }
</style>